import React, { Component } from 'react';
import { Modal } from 'antd';
import { observer, inject } from "mobx-react";
import styles from './index.module.less';
import TaskItem from '../../components/TaskItem';
import SearchBar from '../common/searchBar';
import ListTab from '../common/listTab';

const confirm = Modal.confirm;

@inject(({ taskState, projectState }) => ({ taskState, projectState }))
@observer
class TaskList extends Component {

    state = {
        activeRecid: null,
        activeStatus: 0
    }

    componentWillMount() {
        document.addEventListener('taskListListener', this.taskListListener);
        const { taskState: { getList }, taskid } = this.props;
        getList({ searchkey: '' }, (list) => {
            // 其它页面跳转过来做的处理
            if (taskid) {
                this.handleJumpToActiveItem(taskid, list);
            }
        });
    }

    componentWillReceiveProps(nextProps) {
        const { taskid } = this.props;
        if (nextProps.taskid && taskid !== nextProps.taskid) {
            this.handleJumpToActiveItem(nextProps.taskid, nextProps.taskState.taskList);
        }
    }

    componentDidUpdate() {
        // 列表跟新完成后，把当前activeItem滚动到列表顶部
        const nodeId = this.needScrollIntoViewNodeId;
        const viewNode = this[`node-${nodeId}`]
        if (nodeId && viewNode) {
            viewNode.scrollIntoView();
            this.needScrollIntoViewNodeId = false; // 屏蔽了每次渲染都会把activeItem滚动到列表顶部
        }
    }

    componentWillUnmount() {
        document.removeEventListener('taskListListener', this.taskListListener);
    }

    taskListListener = (event) => {
        const { activeStatus } = event.detail;
        this.setState({ activeStatus });
    }

    handleJumpToActiveItem = (taskid, list) => {
        const t = list.find(t => t.recid === taskid);
        if (t) {
            this.setState({ activeStatus: t.taskstatus === 2 ? 1 : 0 });
            this.viewDetail(t);
            // 用于滚动activeItem到列表顶部
            this.needScrollIntoViewNodeId = taskid;
        }
    }

    viewDetail = ({ recid: taskid, projectid }) => {
        this.setState({ activeRecid: taskid });
        this.props.taskState.getDetail({ taskid });
        if (projectid) this.props.projectState.getDetail({ projectid }); // 获取项目详情 
    }

    ChangeTaskStatus = (isFinish, taskid) => {
        const { complete, restart } = this.props.taskState;
        confirm({
            title: isFinish ? '是否将任务设为未完成？' : '是否将任务设为已完成？',
            content: '',
            okText: "确定",
            cancelText: "取消",
            onOk() {
                isFinish ? restart({ taskid }) : complete({ taskid })
            },
        });
    }

    onChange = (activeStatus) => () => {
        this.setState({ activeStatus });
    }

    render() {
        const { taskList0, taskList1 } = this.props.taskState;
        const { activeRecid, activeStatus } = this.state;
        const taskList = activeStatus ? taskList1 : taskList0;
        return (
            <>
                <SearchBar stateKey={'taskState'} add />
                <ListTab onChange={this.onChange} activeStatus={activeStatus} />
                <div className={styles.listContent}>
                    {taskList.map((v, i) => (
                        <TaskItem
                            innerRef={d => this[`node-${v.recid}`] = d}
                            key={v.recid}
                            data={v}
                            active={activeRecid === v.recid}
                            onClick={() => this.viewDetail(v, i)}
                            onRightClick={(v.ismanager || v.ishost) ? (isFinish, taskid) => this.ChangeTaskStatus(isFinish, taskid) : null}
                        />
                    ))}
                </div>
            </>
        );
    }
}

export default TaskList